<template>
  <div class="app-amin">
    <div class="main" ref="chart"></div>
    <!-- <div class="big-main" ref="lianechart"></div> -->
  </div>
</template>
      
      <script>
import { colorList } from "@/unit/echartsColor";
import * as echarts from "echarts";
export default {
  name: "MyData",
  props: {
    initSearchData: {
      type: Object
    },
    initData: {
      type: Object
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.echartsInit();
  },
  watch: {
    initData() {
      this.echartsInit();
    }
  },
  methods: {
    echartsInit() {
      let dataList = []
      if(this.initData.system && this.initData.system.totalProduct) {
        dataList.push({
          name: '数控系统',
          value: this.initData.system.totalProduct
        })
      }
      if(this.initData.HIO && this.initData.HIO.totalHIO) {
        dataList.push({
          name: 'i/o',
          value: this.initData.HIO.totalHIO
        })
      }
      if(this.initData.servo && this.initData.servo.totalServo) {
        dataList.push({
          name: '伺服驱动',
          value: this.initData.servo.totalServo
        })
      }
      if(this.initData.motor && this.initData.motor.totalMotor) {
        dataList.push({
          name: '电机',
          value: this.initData.motor.totalMotor
        })
      }
      let nameList = []
      dataList.forEach(item => {
        nameList.push(item.name)
      })
      const myChart = echarts.init(this.$refs.chart); //初始化容器
      // 饼图数据
      let data = dataList
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        title: {
          text: "发货数统计"
        },
        color: ['#1890ff', 'rgb(109,183,117)', 'rgb(248,181,81)', 'rgb(42,52,243)'],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: nameList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "15%",
            data: data.map((item, index) => {
              return {
                value: item.value,
                name: item.name,
              };
            }),
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ['#1890ff', 'rgb(109,183,117)', 'rgb(248,181,81)', 'rgb(42,52,243)']
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              normal: {
                show: true,//开启显示
                position: 'top',//柱形上方
                textStyle: { //数值样式
                  color: '#000'
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
      <style  scoped>
.app-amin {
  flex: 1;
  width: 100%;
  height: calc(50vh - 120px);

  margin-top: 15px;
  background: #fff;
  border-radius: 15px;
  padding: 15px;
  display: flex;
  position: relative;
}
.main {
  width: 90%;
  height: 100%;
}
</style>